<template>
  <div class="role-item">
    <div class="role-header">
      <div class="role-title">
        <span>{{ person.name }}</span>
        <span v-if="person.identityNames" class="role-identity">({{ person.identityNames }})</span>
      </div>
      <div class="role-actions">
        <el-checkbox v-model="allChecked" @change="handleAllChange">全选</el-checkbox>
      </div>
    </div>
    
    <div class="role-seals">
      <!-- 公章 -->
      <div v-if="showPublic" class="seal-item">
        <el-checkbox v-model="person.checked" @change="handleChange">公章</el-checkbox>
        <div class="seal-preview public-seal" @mousedown="handleSignDown($event, 1)">
          <img :src="publicSealImgRef" alt="公章" />
        </div>
      </div>
      
      <!-- 签字 -->
      <div class="seal-item">
        <el-checkbox v-model="person.nameChecked" @change="handleChange">签字</el-checkbox>
        <div class="seal-preview qz-seal" @mousedown="handleSignDown($event, 0)">
          <span>{{ person.name }}</span>
        </div>
      </div>
      
      <!-- 私章 -->
      <div v-if="showOnes" class="seal-item">
        <el-checkbox v-model="person.onesChecked" @change="handleChange">私章</el-checkbox>
        <div class="seal-preview ones-seal" @mousedown="handleSignDown($event, 3)">
          <img :src="onesSealImgRef" alt="私章" />
        </div>
      </div>
      
      <!-- 财务章 -->
      <div v-if="showCwz" class="seal-item">
        <el-checkbox v-model="person.cwzChecked" @change="handleChange">财务章</el-checkbox>
        <div class="seal-preview cwz-seal" @mousedown="handleSignDown($event, 4)">
          <img :src="cwzSealImgRef" alt="财务章" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, defineComponent, watch } from 'vue'

// 公章图片
import publicSealImg from '../../assets/public-seal.svg'
// 私章图片
import onesSealImg from '../../assets/ones-seal.svg'
// 财务章图片
import cwzSealImg from '../../assets/cwz-seal.svg'

export default defineComponent({
  name: 'RoleItem',
  
  props: {
    // 签署人信息
    person: {
      type: Object,
      required: true
    },
    // 显示公章
    showPublic: {
      type: Boolean,
      default: true
    },
    // 显示私章
    showOnes: {
      type: Boolean,
      default: true
    },
    // 显示财务章
    showCwz: {
      type: Boolean,
      default: true
    }
  },
  
  emits: ['sign-down', 'change'],
  
  setup(props, { emit }) {
    // 全选状态
    const allChecked = ref(false)
    
    // 图片资源
    const publicSealImgRef = ref(publicSealImg)
    const onesSealImgRef = ref(onesSealImg)
    const cwzSealImgRef = ref(cwzSealImg)
    
    // 监听选中状态变化
    watch(
      () => [
        props.person.checked,
        props.person.nameChecked,
        props.person.onesChecked,
        props.person.cwzChecked
      ],
      () => {
        updateAllChecked()
      }
    )
    
    /**
     * 更新全选状态
     */
    const updateAllChecked = () => {
      const { checked, nameChecked, onesChecked, cwzChecked } = props.person
      const checkedCount = [checked, nameChecked, onesChecked, cwzChecked].filter(Boolean).length
      const totalCount = getVisibleSealCount()
      
      allChecked.value = checkedCount > 0 && checkedCount === totalCount
    }
    
    /**
     * 获取可见签章数量
     */
    const getVisibleSealCount = () => {
      let count = 1 // 签字始终可见
      if (props.showPublic) count++
      if (props.showOnes) count++
      if (props.showCwz) count++
      return count
    }
    
    /**
     * 处理全选变化
     */
    const handleAllChange = (val) => {
      props.person.nameChecked = val
      
      if (props.showPublic) {
        props.person.checked = val
      }
      
      if (props.showOnes) {
        props.person.onesChecked = val
      }
      
      if (props.showCwz) {
        props.person.cwzChecked = val
      }
      
      emit('change')
    }
    
    /**
     * 处理单个选中变化
     */
    const handleChange = () => {
      updateAllChecked()
      emit('change')
    }
    
    /**
     * 处理签章拖拽
     */
    const handleSignDown = (event, signMethod) => {
      emit('sign-down', props.person, event, signMethod)
    }
    
    // 初始化全选状态
    updateAllChecked()
    
    return {
      allChecked,
      publicSealImgRef,
      onesSealImgRef,
      cwzSealImgRef,
      handleAllChange,
      handleChange,
      handleSignDown
    }
  }
})
</script>

<style lang="scss" scoped>
.role-item {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  
  .role-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    
    .role-title {
      font-weight: bold;
      
      .role-identity {
        margin-left: 5px;
        font-size: 12px;
        color: #666;
      }
    }
  }
  
  .role-seals {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    
    .seal-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .seal-preview {
        margin-top: 5px;
        cursor: move;
        
        &.public-seal,
        &.ones-seal,
        &.cwz-seal {
          width: 60px;
          height: 60px;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
        
        &.qz-seal {
          width: 80px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
        }
      }
    }
  }
}
</style>